<template>
  <link
    rel="stylesheet"
    ref="homeStyle"
    href="/src/views/subjects/english/pages/home/recite-words-home/recite-words-home.css"
  />
  <div class="all">
    <!-- 中间显示区域（添加过渡动画） -->
    <transition name="fade">
      <section v-if="showMiddleArea" class="show-area">
        <!-- 轮播容器 -->
        <div class="slider-container">
          <div
            v-for="(slogan, index) in slogans"
            :key="index"
            class="slogan-item"
            :class="{ active: index === currentIndex }"
          >
            <!-- 第一行 -->
            <div class="slogan-line">{{ slogan.line1 }}</div>
            <!-- 第二行 -->
            <div class="slogan-line">{{ slogan.line2 }}</div>
          </div>
        </div>
      </section>
    </transition>

    <!-- 中间签到区域 -->
    <section v-if="shouldShowClickableDiv" @click="openPopup" class="sign-area">
      <div class="sign-btn">
        <span class="sign-text">签到</span>
        <span class="sign-eng">ATTENDANCE</span>
      </div>
    </section>

    <!-- 弹窗组件 -->
    <transition name="popup-fade">
      <div v-if="isPopupVisible" class="popup-backdrop">
        <button @click="closePopup" class="close-btn"></button>
        <div class="popup-container">
          <div>签到</div>
          <div>&nbsp;成功！</div>
        </div>
      </div>
    </transition>

    <!-- 底部学习按钮区域 -->
    <section class="learn-area">
      <router-link class="learn-box" to="#">
        <div><span class="learn-title">LEARN</span></div>
        <span class="learn-desc">待学习词汇：<span class="learn-count">3546</span></span>
      </router-link>
      <router-link class="vocab-box" to="#">
        <img src="/src/assets/images/english-home-img/书籍1_book-one.png" alt="" />
        <div>英语四级词汇</div>
      </router-link>
      <router-link class="review-box" to="#">
        <div><span class="review-title">REVIEW</span></div>
        <span class="review-desc">待复习词汇：<span class="review-count">29</span></span>
      </router-link>
    </section>
  </div>
</template>

<script>
export default {
  name: "ReciteWordsHome", // 修正命名，匹配实际功能
  props: {
    // 轮播标语数组（支持父组件传入）
    slogans: {
      type: Array,
      default: () => [
        { line1: "天才就是百分之九十九的汗水", line2: "加百分之一的灵感。" },
        { line1: "只要现在开始追赶，", line2: "就已经走在胜利的路上。" },
        { line1: "人生在勤，不索何获。", line2: "" },
        { line1: "古之立大志者，不惟有超世之才，", line2: "亦必有坚韧不拔之志。" },
        { line1: "穷且益坚，", line2: "不坠青云之志。" },
      ],
    },
    // 轮播间隔时间(毫秒)
    interval: {
      type: Number,
      default: 15000,
    },
  },
  data() {
    // 合并为一个data()函数
    return {
      // 签到与弹窗相关状态
      isPopupVisible: false,
      shouldShowClickableDiv: true,
      showMiddleArea: false,
      autoCloseTimer: null,
      // 轮播相关状态
      currentIndex: 0,
      timer: null,
    };
  },
  mounted() {
    this.startTimer(); // 启动轮播
  },
  beforeUnmount() {
    // 清除所有定时器，避免内存泄漏
    clearTimeout(this.autoCloseTimer);
    this.clearTimer();
  },
  methods: {
    // 签到与弹窗方法
    openPopup() {
      this.isPopupVisible = true;
      this.showMiddleArea = false;
      this.shouldShowClickableDiv = false;
      this.autoCloseTimer = setTimeout(() => {
        this.closePopup();
      }, 2000);
    },
    closePopup() {
      clearTimeout(this.autoCloseTimer);
      this.isPopupVisible = false;
      this.showMiddleArea = true;
    },
    //-----------------------------------------------------------------------------------------------------------
    // 轮播方法
    startTimer() {
      this.clearTimer();
      this.timer = setInterval(() => {
        this.nextSlide();
      }, this.interval);
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.slogans.length;
    },
  },
  watch: {
    // 监听标语变化，重置轮播
    slogans() {
      this.currentIndex = 0;
      this.startTimer();
    },
  },
};
</script>
